<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>客户端命令调用详情</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <#include '/inc/frontResources.html'>
</head>
<body class="hold-transition sidebar-mini layout-navbar-fixed">
<div class="wrapper">
    <!-- Header End -->
  <#include "/inc/head.html">
  <div class="content-wrapper ml-0">
    <div class="content">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-body">
                <form method="get" action="${request.contextPath}/client/show/commandStatistics/client" id="clientCommandStatisticsForm">
                  <div class="row">
                    <div class="d-flex justify-content-end">
                      <label class="col-form-label" style="font-weight:bold;text-align:left;">
                        &nbsp;查询日期:&nbsp;&nbsp;
                      </label>
                      <div class="col-auto">
                        <input class="form-control" type="date" name="searchDate" id="searchDate" value="${searchDate!}">
                      </div>
                      <label>&nbsp;<input type="submit" class="btn btn-info" value="查询"/></label>
                    </div>
                  </div>
                  <div class="row">
                    <h4>&nbsp;&nbsp;应用：<label class="label label-success">${appId!}</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      查询时间：<label class="label label-success">${searchDate!}</label>
                    </h4>
                  </div>
                  <div class="dropdown-divider"></div>

                  <div class="row">
                    <div class="d-flex justify-content-start">
                      <#assign client_needSelect="0">
                      <label class="col-auto">
                        &nbsp;&nbsp;客户端: &nbsp;&nbsp;
                      </label>
                      <#list clientList as item>
                        <#if (item_index < 5)>
                          <div class="form-check">
                            <input type="radio" class="form-check-input" name="client_optionsRadios" value="${item!}"
                            <#if firstClient?? && (firstClient == item)>checked="checked"</#if>
                            onchange="changeClientChart(this.value)"/>
                            ${item!}&nbsp;&nbsp;
                          </div>
                        <#else>
                            <#assign client_needSelect = '1'>
                        </#if>
                      </#list>
                      <div class="col-auto">
                        <#if (client_needSelect?number == 1)>
                          <div class="row">
                            <label class="col-auto">
                            &nbsp;其他:
                            </label>
                            <div class="col-auto">
                              <select name="optionsRadios" onchange="changeClientChart(this.value)">
                                <option>请选择</option>
                                <#list clientList as item>
                                  <#if (item_index >= 5)>
                                    <label>
                                      <option value="${item!}" <#if firstClient?? && (firstClient == item)>selected</#if>>
                                      ${item!}
                                      </option>
                                    </label>
                                  </#if>
                                </#list>
                              </select>
                            </div>
                          </div>
                        </#if>
                      </div>
                      <div class="form-check">
                        <input type="radio" class="form-check-input" name="client_optionsRadios" value="all"
                        <#if firstClient?? && (firstClient == 'all')>checked="checked"</#if>
                        onchange="changeClientChart(this.value)"/>all
                      </div>
                    </div>
                  </div>
                  <div class="dropdown-divider"></div>


                  <div class="row">
                    <div class="d-flex justify-content-start">
                      <#assign command_needSelect = "0">
                      <label class="col-auto">
                        &nbsp;&nbsp;命令: &nbsp;&nbsp;
                      </label>
                      <#list commandList as item>
                        <#if (item_index < 5)>
                          <div class="form-check">
                            <input type="radio" class="form-check-input" name="optionsRadios" value="${item!}"
                            <#if firstCommand?? && (firstCommand == item)>checked="checked"</#if>
                            onchange="changeCommandChart(this.value)"/>
                            ${item!}&nbsp;&nbsp;
                          </div>
                        <#else>
                          <#assign command_needSelect="1">
                        </#if>
                      </#list>
                      <div class="col-auto">
                        <#if (command_needSelect?number == 1)>
                          <div class="row">
                            <label class="col-auto">
                              &nbsp;其他:
                            </label>
                            <div class="col-auto">
                              <select name="command_optionsRadios" onchange="changeCommandChart(this.value)">
                                <option>请选择</option>
                                <#list commandList as item>
                                  <#if (item_index >= 5)>
                                    <label>
                                      <option value="${item!}" <#if firstCommand?? && (firstCommand == item)>selected</#if>>
                                      ${item!}
                                      </option>
                                    </label>
                                  </#if>
                                </#list>
                              </select>
                            </div>
                          </div>
                        </#if>
                      </div>
                      <div class="form-check">
                        <input type="radio" class="form-check-input" name="optionsRadios" value="all"
                        <#if firstCommand?? && (firstCommand == 'all')>checked="checked"</#if>
                        onchange="changeCommandChart(this.value)"/>all
                      </div>
                    </div>
                  </div>
                  <input type="hidden" name="appId" value="${appId!}">
                  <input type="hidden" id="firstCommand" name="firstCommand" value="${firstCommand!}">
                  <input type="hidden" id="firstClient" name="firstClient" value="${firstClient!}">
                </form>
              </div>
            </div>

            <script type="text/javascript">
              var searchDate = '${searchDate!}';
              var firstCommand = '${firstCommand!}';
              var firstClient = '${firstClient!}';

              Highcharts.setOptions({
                global: {
                  useUTC: false
                }
              });
              Highcharts.setOptions({
                colors: ['#2f7ed8', '#E3170D', '#0d233a', '#8bbc21', '#1aadce',
                  '#492970', '#804000', '#f28f43', '#77a1e5',
                  '#c42525', '#a6c96a']
              });

              function changeCommandChart(value) {
                document.getElementById("firstCommand").value = value;
                document.getElementById("clientCommandStatisticsForm").submit();
              }

              function changeClientChart(value) {
                document.getElementById("firstClient").value = value;
                document.getElementById("clientCommandStatisticsForm").submit();
              }


              $(document).ready(
                      function () {
                        if (firstClient == 'all') {
                          var sumCommandStatJson = '${sumCommandStatJson!}';
                          var sumCommandStatList = eval("(" + sumCommandStatJson + ")");
                          var tbody = "";
                          $.each(sumCommandStatList, function (n, value) {
                            console.log("value:" + value);
                            var trs = "";
                            trs += "<tr>"
                                    + "<td>" + (n + 1) + " </td>"
                                    + "<td>" + value.client_ip + " </td>"
                                    + "<td>" + value.count + "</td >"
                                    + "<td>" + value.cost + "</td >"
                                    + " </tr>";
                            tbody += trs;
                          });
                          $('#sumTable-tbody').append(tbody);
                          $("#countContainer").attr("hidden", "hidden");
                          $("#byteContainer").attr("hidden", "hidden");
                          $("#byteOutContainer").attr("hidden", "hidden");
                          $("#costContainer").attr("hidden", "hidden");
                          $("#sumTable").removeAttr("hidden");
                        } else if (firstCommand == 'all') {
                          var sumClientStatJson = '${sumClientStatJson!}';
                          var sumClientStatList = eval("(" + sumClientStatJson + ")");
                          var tbody = "";
                          $.each(sumClientStatList, function (n, value) {
                            console.log("value:" + value);
                            var trs = "";
                            trs += "<tr>"
                                    + "<td>" + n + " </td>"
                                    + "<td>" + value.command + " </td>"
                                    + "<td>" + value.count + "</td >"
                                    + "<td>" + value.cost + "</td >"
                                    + " </tr>";
                            tbody += trs;
                          });
                          $('#sumTable-tbody').append(tbody);
                          $("#countContainer").attr("hidden", "hidden");
                          $("#byteContainer").attr("hidden", "hidden");
                          $("#byteOutContainer").attr("hidden", "hidden");
                          $("#costContainer").attr("hidden", "hidden");
                          $("#sumTable").removeAttr("hidden");
                        } else {
                          $("#sumTable").attr("hidden", "hidden");
                          var appClientCommandStatisticsMap = '${appClientCommandStatisticsJson!}';
                          var appClientCommandStatisticsJson = eval("(" + appClientCommandStatisticsMap + ")");

                          var data = appClientCommandStatisticsJson;

                          var count_unit = "次数";
                          var count_appTotalOptions = getOption("countContainer", "<b>" + firstCommand + "命令调用次数</b>", count_unit);
                          count_appTotalOptions.series = getClientStatisticsByType(data, 'count', count_unit, searchDate);
                          var count_appTotalchart = new Highcharts.Chart(count_appTotalOptions);

                          //cost
                          var cost_unit = "毫秒";
                          var cost_appTotalOptions = getOption("costContainer", "<b>" + firstCommand + "命令平均耗时</b>", cost_unit);
                          cost_appTotalOptions.series = getClientStatisticsByType(data, 'cost', cost_unit, searchDate);
                          var cost_appTotalchart = new Highcharts.Chart(cost_appTotalOptions);

                          //bytesIn
                          var byte_unit = "MB";
                          var byte_appTotalOptions = getOption("byteContainer", "<b>" + firstCommand + "命令输入流量</b>", byte_unit);
                          byte_appTotalOptions.series = getClientStatisticsByType(data, 'bytesIn', byte_unit, searchDate);
                          var byte_appTotalchart = new Highcharts.Chart(byte_appTotalOptions);

                          //bytesOut
                          var byteOut_appTotalOptions = getOption("byteOutContainer", "<b>" + firstCommand + "命令输出流量</b>", byte_unit);
                          byteOut_appTotalOptions.series = getClientStatisticsByType(data, 'bytesOut', byte_unit, searchDate);
                          var byteOut_appTotalOptions = new Highcharts.Chart(byteOut_appTotalOptions);

                        }
                      });
            </script>

            <div id="sumTable" style="max-width: 100%; min-width: 310px; margin: 0 auto">
              <div class="card">
                <div class="card-header">
                  <h5 class="card-title text-center">
                    <#if firstClient?? && (firstClient=='all')>命令&nbsp;${firstCommand!}</#if>
                    <#if firstCommand?? && (firstCommand=='all')>客户端&nbsp;${firstClient!}</#if>
                    &nbsp;--&nbsp;分布统计表
                  </h5>
                </div>
                <div class="card-body">
                  <table class="table table-striped table-hover table-bordered">
                    <thead>
                    <tr>
                      <th scope="col">序号</th>
                      <th scope="col">
                        <#if firstClient?? && (firstClient == 'all')>客户端
                        <#elseif firstCommand?? && (firstCommand == 'all')>命令
                        </#if>
                      </th>
                      <th scope="col">调用总次数</th>
                      <th scope="col">平均耗时(单位:毫秒)</th>
                    </tr>
                    </thead>
                    <tbody id="sumTable-tbody"></tbody>
                  </table>
                </div>
              </div>
            </div>

            <div id="countContainer" style="max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto"></div>
            <div id="costContainer" style="max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto"></div>
            <div id="byteContainer" style="max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto"></div>
            <div id="byteOutContainer" style="max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <#include "/inc/footer.html">
  </div>
</body>
</html>